<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 放置页面工具 -->
      <PageTools :show-before="true">
        <template #before>
          共{{ total }}条数据
        </template>
        <template #after>
          <el-button v-if="checkPerm('importEmployee')" size="small" type="warning" @click="$router.push('/import')">导入</el-button>
          <el-button size="small" type="danger" @click="exportExcel">导出</el-button>
          <el-button size="small" type="primary" @click="showDialog=true">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 添加员工弹窗 -->
      <!-- 添加修饰符sync,才能双向绑定showDialog,父组件通知子组件, -->
      <AddEmployee :show-dialog.sync="showDialog" />
      <!-- 放置二维码弹窗 -->
      <el-dialog title="头像二维码" :visible="showQRCode" width="500px" @close="showQRCode=false">
        <el-row type="flex" justify="center">
          <canvas ref="myCanvas" />
        </el-row>
      </el-dialog>
      <!-- 放置角色弹窗 -->
      <!-- :user-id传id给角色组件 -->
      <AssignRole ref="assignRole" :show-dialog.sync="showAssignRole" />
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table border :data="employeeList">
          <el-table-column label="序号" type="index" sortable="" />
          <el-table-column label="头像" sortable="" width="150px">
            <template #default="{row}">
              <img v-imgerr="require('@/assets/common/head.jpg')" :src="row.staffPhoto" alt="" class="avatar" @click="showQRCodeFn(row.staffPhoto)">
            </template>
          </el-table-column>
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <!-- 格式化聘用形式 -->
          <!-- 格式化处理数据 :formatter="函数名" -->
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="formatEmployment" />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="">
            <!-- 调用过滤器格式化入职时间 -->
            <template #default="{row}">{{ row.timeOfEntry | formatDate }}</template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="" prop="enableState">
            <template #default="{row}">
              <el-switch v-model="row.enableState" :active-value="1" :inactive-value="2" disabled />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="250">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="showAssignRoleFn(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height:60px">
          <el-pagination layout="prev,pager,next" :current-page="page.page" :page-size="page.size" :total="total" @current-change="pageChange" />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '@/api/employee'
// 引入员工枚举数据,枚举数据就是将数据分类,同一类型不同数据进行数字编号,根据同一类型下不同数字获取原本的值
import employeeEnum from '@/api/constant/employees'
// 引入新增员工弹窗组件
import AddEmployee from './components/addEmployee'
// 引入分配角色
import AssignRole from './components/assign-role'
// 引入导出excel函数
import { export_json_to_excel } from '@/vendor/Export2Excel'
//  从过滤器js中引入时间格式化函数
import { formatDate } from '@/filters/index'
// 引入二维码包
import qrcode from 'qrcode'
export default {
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      employeeList: [], // 员工列表
      total: 0,
      page: {
        page: 1,
        size: 5
      },
      showDialog: false,
      showQRCode: false,
      showAssignRole: false,
      userId: ''
    }
  },
  created() {
    this.getEmployeeList()
  },

  methods: {
    // 显示角色
    async showAssignRoleFn(id) {
      await this.$refs.assignRole.getUserDetail(id)
      this.showAssignRole = true
    },

    // 显示员工头像二维码
    // 如果存在头像图片则生成二维码,否则不生成
    showQRCodeFn(url) {
      if (url) {
        this.showQRCode = true
        // 使用$nextTick在弹窗后再显示二维码
        this.$nextTick(() => {
          qrcode.toCanvas(this.$refs.myCanvas, url)
        })
      }
    },
    // 封装获取员工列表函数
    async getEmployeeList() {
      const { rows, total } = await getEmployeeList(this.page)
      this.employeeList = rows.map(user => {
        // 本地数据缺失了账号状态, 临时添加
        return {
          ...user,
          enableState: user.enableState || 1,
          departmentName: user.departmentName || '未知'
        }
      })
      // console.log(this.employeeList)
      this.total = total
    },

    // 切换页面
    pageChange(index) {
      this.page.page = index
      this.getEmployeeList()
    },

    // 格式化聘用形式
    // el-table的formatter属性,el-ui官网查询
    formatEmployment(rows, column, cellValue, index) {
      // console.log( rows, column, cellValue, index)  //行数据,列数据,该单元格的值,下标
      // find方法返回第一个符合条件的元素
      const obj = employeeEnum.hireType.find(item => Number(item.id) === Number(cellValue))
      return obj ? obj.value : '未知'
    },

    // 删除员工
    async  delEmployee(id) {
      try {
        await this.$confirm('确认删除员工?')
        await delEmployee(id)
        this.getEmployeeList()
        this.$message.success('删除员工成功')
      } catch (error) {
        console.log(error)
      }
    },

    // 新增员工,直接在el-button上控制showDialog
    // addEmployee() {
    //   this.showDialog = true
    // }

    // 导出员工列表
    async exportExcel() {
      // 获取当前所有员工数据
      const { rows } = await getEmployeeList({ page: 1, size: this.total })
      console.log('原生数据', rows)
      // 导出excel的export_json_to_excel,需要表头header,数据data,均为数组格式
      // 准备表头
      const header = ['姓名', '手机号', '工号', '聘用形式', '入职日期', '部门']
      // 上面获取的rows数据为对象,需要转换为数组
      const data = rows.map(user => {
        // 调用自定义转换数组函数
        return this.convertUserArr(user)
      })
      console.log('处理数据', data)
      // 调用export_json_to_excel导出excel文件
      export_json_to_excel({
        header,
        data
      })
    },

    // 对象转换数组函数
    convertUserArr(user) {
      const header = ['姓名', '手机号', '工号', '聘用形式', '入职日期', '部门']
      // 根据字典将表头翻译为英文键名
      const dict = {
        '姓名': 'username',
        '手机号': 'mobile',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '入职日期': 'timeOfEntry',
        '部门': 'departmentName'
      }
      // 定义一个新的数组
      const newUser = []
      // 遍历表头,根据表头找到user中的对应键名的值
      header.forEach(key => {
        const enKey = dict[key] // username...
        const val = user[enKey] // 获取的数据的值
        if (enKey === 'formOfEmployment') {
          // 找到枚举中对应的数据
          const obj = employeeEnum.hireType.find(item => item.id === val)
          newUser.push(obj ? obj.value : '未知形式')
        } else if (enKey === 'timeOfEntry') {
          newUser.push(formatDate(val))
        } else {
          newUser.push(val)
        }
      })
      return newUser
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar{
  width: 130px;
  height: 120px;
  object-fit:cover;  //保持比例
}
</style>
